<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/table.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/dwz/themes/default/style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="${pageContext.request.contextPath}/dwz/themes/css/core.css" rel="stylesheet" type="text/css" media="screen" />
<script src="${pageContext.request.contextPath}/jquery/jquery-2.1.4.min.js" type="text/javascript"></script>

<form>
<table border="0" cellpadding="0" cellspacing="0" class="table_border">
	<tr>
		<td>
			<table width="100%" border="0" cellpadding="0" cellspacing="0"
				class="table_right">
				<tr>
					<td><font style="font-size: 12px;"><strong>新增角色</strong></font>
					</td>
					<td width="25" height="26" align="left"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>
			<table width="100%" border="0" cellspacing="0" class="table_right">
				<tr>
					<td align="center">
						<table width="100%" border="0" cellspacing="0"
							class="table_padding">
							<tr>
								<td align="center">
									<table border="0" cellpadding="0" cellspacing="0"
										class="box_table" id="box_table2">
										<thead>
											<tr>
												<td class="box_table_even"><span class="in">代码：</span></td>
												<td class="box_table_odd">
													<span class="in">
														<input id="code" onblur="checkCode()" type="text" />
														<span class="star">*</span>
														<span id="codeMesg"></span>
													</span>
												</td>
											</tr>
											<tr>
												<td class="box_table_even"><span class="in">名称：</span></td>
												<td class="box_table_odd">
													<span class="in">
														<input id="name" onblur="checkName()" type="text" />
														<span class="star">*</span>
														<span id="nameMesg"></span>
													</span>
												</td>
											</tr>
											<tr>
												<td class="box_table_even">描述：</td>
												<td class="box_table_odd">
													<textarea id="remark" style="width: 95%" cols="100" rows="5"></textarea></td>
											</tr>
										</thead>
										<tbody>
										</tbody>
									</table>
								</td>
							</tr>
						</table>

						<table border="0" cellpadding="0" cellspacing="0"
							class="operation">
							<thead>
								<tr>
									<td height="24">&nbsp;</td>
								</tr>
							</thead>
						</table>
					</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>
			<table width="100%" border="0" cellpadding="0" cellspacing="0"
				class="table_padding">
				<tr>
					<td height="21" align="right">
						<table align="left">
							<tr>
								<td width="50px"><a class="button" id="saveBtn" href="javascript:void(0)"><span>保存</span></a></td>
								<td width="50px"><a class="button"
									href="javascript:void(window.history.back());"><span>返回</span></a></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
</form>

<script>
	function checkForm(){
		return checkName() && checkCode();
	}
	function checkName(){
		var regExp = /^.{2,10}$/;
		var val = $("#name").val();
		var flag = regExp.test(val);
		if (flag){
			$.ajax({
				type:"GET",
				url: "role?method=getRoleByName&name="+val,
				async:false,
				success:function (result) {
					if (result.code=="500"){
						flag=false;
					}
					showMesg("nameMesg",flag,"角色名已存在");
				}
			});
		}else {
			showMesg("nameMesg",flag,"角色名字长度为2-10");
		}
		return flag;
	}
	function checkCode(){
		var regExp = /^\d{2,5}$/;
		var val = $("#code").val();
		var flag = regExp.test(val);
		showMesg("codeMesg",flag,"code为2-5的数字");
		return flag;
	}
	function showMesg(id,flag,info){
		var idEle = document.getElementById(id);
		idEle.innerText = flag?"数据合法":info;
		idEle.style.color = flag?"green":"red";

	}
	$("#saveBtn").click(function(){
		$.ajax({
			type:"POST",
			url:"role",
			async:false,
			data:{
				method:"save",
				name:$("#name").val(),
				code:$("#code").val(),
				remark:$("#remark").val()
			},
			beforeSend:function(){
				var flag = checkForm();
				$("#mesg").text(flag?"数据提交中，请稍后...":"请输入合法的数据");
				return flag
			},
			success:function (result) {
				if (result.code==200){
					$("#mesg").text("保存成功");
				}else {
					$("#mesg").text("保存失败");
				}
				location.href="role?method=list";

			}
		});
	});
</script>
